<template>
	<view class="page-height">
		<i-top-bar title="工单列表" :leftArrow="false"> </i-top-bar>
		<view class="page-content">
			<view class="top-view">
				<view class="search-line">
					<image src="@/static/images/search.png" class="ioc"></image>
					<input type="text" v-model="keyword" placeholder="输入关键字搜索" confirm-type="search" class="input" @confirm="getList('init')" />
				</view>
				<view class="sx-line">
					<picker @change="onTimeChange" :range="time_list" range-key="name" class="picker-view">
						<view class="select-line">
							<text class="text u-line-1">{{time_active.name}}</text>
							<image src="@/static/images/select.png" class="select-ioc"></image>
						</view>
					</picker>

				</view>
				<view class="sx-line">
					<picker @change="onStatusChange" :range="status_list" range-key="name" class="picker-view">
						<view class="select-line">
							<text class="text u-line-1">{{status_active.name}}</text>
							<image src="@/static/images/select.png" class="select-ioc"></image>
						</view>
					</picker>
				</view>
			</view>

			<view class="list" v-if="data_list.length">
				<view class="item" v-for="(item,index) in data_list" :key="index">
					<view class="name-line">
						<text class="name">{{item.product_name}}</text>
						<text class="status" v-if="item.status == 1">待审核</text>
						<text class="status" v-if="item.status == 2">已驳回</text>
						<text class="status" v-if="item.status == 3">待用户寄出</text>
						<text class="status" v-if="item.status == 4">待维修部收货</text>
						<text class="status" v-if="item.status == 5">维修部处理中</text>
						<text class="status" v-if="item.status == 7">待上传凭证</text>
						<text class="status" v-if="item.status == 8">凭证待审核</text>
						<text class="status" v-if="item.status == 9">待维修部寄出</text>
						<text class="status" v-if="item.status == 10">已完成</text>
					</view>
					<view class="data-col">
						<text class="data-text">序列号：{{item.product_code}}</text>
						<text class="data-text">创建日期：{{item.createtime}}</text>
					</view>
					<view class="btn-line">
						<!-- <text class="btn-text" @click="onSubmitReat(item)" v-if="item.status == 10">评价</text> -->
						<text class="btn-text" @click="onViewOrder(item)">查看详情</text>
						<text class="btn-text" @click="onWaybillInput(item)" v-if="item.status == 3">上传单号</text>
						<text class="btn-text" @click="onPayImageUpload(item)" v-if="item.status == 7">上传凭证</text>
						<text class="btn-text" @click="onEditOrder(item)" v-if="item.status == 2">重新提交</text>
					</view>
				</view>

			</view>
			<view class="list" style="margin-top: 100rpx;" v-else>
				<i-empty text="暂无相关工单"></i-empty>
			</view>


		</view>
		<i-tabbar :current="1"></i-tabbar>
		<u-toast ref="uToast"></u-toast>

		<!-- 运单填写 -->
		<waybill-input ref="waybill_input" ></waybill-input>

		<!-- 上传费用凭证 -->
		<pay-image-upload ref="pay_image_upload" type="order"></pay-image-upload>

		<!-- 评价工单 -->
		<submit-reat ref="submit_reat" @success="getList('init')"></submit-reat>
	</view>
</template>
<script>
	import WaybillInput from "./components/waybill-input.vue" //运单填写
	import PayImageUpload from "./components/pay-image-upload.vue" //上传费用凭证
	import SubmitReat from "./components/submit-reat.vue" //评价工单
	export default {
		components: { WaybillInput, PayImageUpload, SubmitReat },
		data() {
			return {
				keyword: "",
				time_list: [
					{ value: 0, name: "全时间" },
					{ value: 'week', name: "近1周" },
					{ value: 'month', name: "近1月" },
					{ value: 'three_month', name: "近3月" },
				],
				time_active: { value: 0, name: "全时间" },
				status_list: [
					{ value: 0, name: "全部状态" },
					{ value: 1, name: "待审核" },
					{ value: 2, name: "已驳回" },
					{ value: 3, name: "待寄出" },
					{ value: 4, name: "待维修部收货" },
					{ value: 5, name: "维修部处理中" },
					{ value: 7, name: "上传费用凭证" },
					{ value: 8, name: "凭证审核中" },
					{ value: 9, name: "待维修部寄回" },
					// { value: , name: "待评价" },
					{ value: 10, name: "已完成" },
				],
				status_active: { value: 0, name: "全部状态" },
				data_list: [],
				page: 0,
				page_size: 10,
				is_more: false,
			};
		},
		onReady() {
			uni.$on('order-get-data', () => {
				this.getList('init')
			})
		},
		onLoad() {
			this.getList('init')
		},
		onPullDownRefresh() {
			this.getList('init')
			this.getUserInfo()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			this.getList('more');
		},
		onUnload() {
			uni.$off("order-get-data")
		},
		methods: {
			onTimeChange(e) {
				const active = this.time_list[e.detail.value]
				this.time_active = active
				this.getList('init')
			},
			onStatusChange(e) {
				const active = this.status_list[e.detail.value]
				this.status_active = active
				this.getList('init')
			},
			getList(type = 'more') {
				if (type === 'init') {
					this.page = 0;
					this.is_more = true;
				} else if (!this.is_more) {
					return false
				}
				this.page++
				const params = {
					page: this.page,
					limit: this.page_size
				}
				if (this.keyword) params.product_name = this.keyword
				if (this.time_active.value) params.time = this.time_active.value
				if (this.status_active.value) params.status = this.status_active.value
				if (this.page === 1) this.data_list = [];
				this.api.post("/api/work/workList", {
					params: params
				}).then(res => {
					const list = res.list
					this.data_list = [...this.data_list, ...list]
					this.is_more = (this.page < res.last_page)

				}).catch(err => {
					console.log(err);
					this.apiErr(err)
				}).finally(() => {
					this.init = false
					this.loadingHide();
				})
			},
			onViewOrder(item) {
				this.openWin(`/pages/order/detail?id=${item.id}`)
			},
			onWaybillInput(item) {
				uni.showModal({
					content: "寄回时请写一张小纸条（姓名、电话、地址、问题）如没有，不利于工程师排查。\r\n请单独邮寄商品，配件一律不要寄回，如:盒子、保护套、数据线等，以免配件丢失！如出现丢失,责任自付。",
					success: (e) => {
						if (e.confirm) {
							this.$refs.waybill_input.show(item.id)
						}
					}
				})
			},
			onSubmitReat(item) {
				this.$refs.submit_reat.show(item.id)
			},
			onPayImageUpload(item) {
				this.$refs.pay_image_upload.show(item.id)
			},
			onEditOrder(item) {
				this.openWin(`add-order?id=${item.id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding-bottom: 20rpx;
	}

	.top-view {
		padding: 30rpx;
		display: flex;
		align-items: stretch;

		.search-line {
			display: flex;
			align-items: center;
			width: 280rpx;
			height: 84rpx;
			border-radius: 12rpx;
			padding: 0 20rpx;
			background-color: #ffffff;

			.ioc {
				width: 28rpx;
				height: 28rpx;
				margin-right: 12rpx;
			}

			.input {
				flex: 1;
				font-size: 26rpx;
			}
		}

		.sx-line {
			width: 190rpx;
			margin-left: auto;
			background-color: #ffffff;
			height: 84rpx;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			padding: 0 14rpx;

			.picker-view {
				width: 100%;
			}

			.select-line {
				display: flex;
				align-items: center;

				.text {
					flex: 1;
					font-size: 26rpx;
					color: #B3B3B3;
				}

				.select-ioc {
					width: 20rpx;
					height: 20rpx;
				}
			}

		}
	}

	.list {
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;

		.item {
			display: flex;
			flex-direction: column;
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx 38rpx 20rpx;
			margin-top: 26rpx;

			.name-line {
				display: flex;
				align-items: center;

				.name {
					flex: 1;
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #333333;
				}

				.status {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
				}
			}

			.data-col {
				display: flex;
				flex-direction: column;
				margin-top: 10rpx;

				.data-text {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #333333;
					padding: 4rpx 0;
				}
			}

			.btn-line {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.btn-text {
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 54rpx;
					line-height: 54rpx;
					background: #E6E6E6;
					border-radius: 100px;
					padding: 0 30rpx;
					font-size: 24rpx;
					color: #333333;
					margin-left: 24rpx;
				}
			}



		}
	}
</style>